<template>
	<view class="main bgColor-white" >
	<cu-custom :key="'header'+headerKey" :bgColor="userType=='20'?'bg-gradual-blue-light':'bg-gradual-orange-light'"  :isBack="true" backText="返回" title="找回密码"></cu-custom>
	<view class="logoImgBox">
		<text style="font-size: 150rpx;" class="iconfont" :class="userType=='20'?'text-blue-light icon-gerenshebao':'text-orange-light icon-danwei'"></text>
	</view>
	<view class="content">
		<view v-if="!changeSuccess">
			<view class=" margin-top-sm">
				<zh-input type="number" v-model="cellphone"  maxlength="11" :placeholder="userType=='20'?'请输入手机号码':'请输入管理员手机号码'" :iconClass="['iconfont','icon-shouji',userType=='20'?'text-blue-light':'text-orange-light']" ></zh-input>
			</view>
			<zh-picker
				v-if="userType=='30'"
				:iconClass="['iconfont','icon-danwei',userType=='20'?'text-blue-light':'text-orange-light']"
				:rightIconClass="userType=='20'?'text-blue-light':'text-orange-light'"
				pickerRef="org"
				mode="selector"
				:options="orgData"
				inputAlign="left"
				placeholder="请选择单位"
				:disabled="orgDisabled"
				:themeColor="userType=='20'?'#0081ff':'#f37b1d'"
				@pickerChange="onOrgChange($event)"
				:defaultProps="{label:'orgName',value:'orgId'}"
				defaultType="orgId"
				ref="org"
			></zh-picker>
			<view v-if="showImgCode" class="cu-form-group">
				<view class="title">
				<text class="iconfont icon-yanzhengma1"  :class="userType=='20'?'text-blue-light':'text-orange-light'"></text>
				</view>
				<input type="text"  maxlength="4" name="" v-model="imgCode" placeholder="请输入图片验证码"/>
				<image :src="imgSrc" @click="initCode" mode="" class="img-captcha"></image>
			</view>
			<zh-input type="number" maxlength="4" v-model="shortMsgCode"  :iconClass="['iconfont','icon-yanzhengma',userType=='20'?'text-blue-light':'text-orange-light']" :rightButtonFlag="true" :rightButton="{disabled:!codeClick,text:codeBut,bg:userType=='20'?'bg-blue-light':'bg-orange-light'}" @right-button-click="getCode" placeholder="请输入手机验证码" ></zh-input>
			<zh-input v-model="userPassword" maxlength="16"  placeholder="请输入新密码" :password="true" :iconClass="['iconfont','icon-mima',userType=='20'?'text-blue-light':'text-orange-light']" :rightIconClass="userType=='20'?'text-blue-light':'text-orange-light'"></zh-input>
			<view class="flex flex-direction" style="padding-top: 10rpx;">
				<button class="cu-btn shadow margin-tb-sm lg" :class="userType=='20'?'bg-gradual-blue-light':'bg-gradual-orange-light'" @click="onClick">提<text style="width: 50rpx;"></text>交</button>
			</view>
		</view>
		<view v-if="changeSuccess">
			<view class="text-reset">重置成功，新密码已生效！</view>
			<view class="flex flex-direction">
				<button class="cu-btn shadow margin-tb-sm lg" :class="userType=='20'?'bg-gradual-blue-light':'bg-gradual-orange-light'" @tap="gotoLogin">立即登陆</button>
			</view>
		</view>
	</view>
	</view>
</template>

<script>
	import util from '@/common/util/util.js'
	import md5 from 'md5'	
	import reqConfig from '@/common/config/reqConfig.js'
	import api from '@/api/system/login.js'
	export default {
		onShow() {
			this.headerKey += 1;
		},
		onReady() {
			if(!this.loginKey){
				this.loginKey = util.uuid()
			}
		},
		data() {
			return {
				headerKey:0,
				windowHeight:this.$windowHeight,
				userType: "20",
				codeBut:"获取验证码",
				codeTimer: "",//验证码定义一个定时器的变量
				codeClick:true,
				cellphone: "",
				loginKey: "",
				shortMsgCode: "",
				imgSrc:"",
				imgCode:"",
				orgId:"",
				userPassword:"",
				showImgCode:false,
				changeSuccess: false,
				orgDisabled:false,
				orgData:[]
			}
		},
		onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数
			this.userType=this.$Route.query.userType;
		},
		methods: {
			initCode() {
				const url = reqConfig.baseUrl+"/sso/jycy/getImgCode?loginKey="+this.loginKey+"&time="+new Date().getTime()
				this.imgSrc=url
			},
			onOrgChange(e) {
				this.orgId = e.value;
			},
			// 获取验证码
			getCode(){
				var _that = this
				// 倒计时
				if(_that.codeClick){
					if (!this.$validate.isPhone(_that.cellphone)) {
					  uni.showToast({
					    icon: 'none',
					    title: '请输入正确的手机号',
						duration:2000
					  })
					}else{
						
						// 发送短信
						const sendData = {};
						sendData.loginKey=this.loginKey;
						sendData.cellphone=this.cellphone;
						sendData.smsSendType= 'forgetPassword';
						sendData.imgCode= this.imgCode;
						sendData.orgId= this.orgId;
						sendData.userType= this.userType;
						this.$http.post(api.loginSendMessage, sendData).then(res => {
							uni.showToast({
							  icon: 'none',
							  title: '短信发送成功',
							  duration:2000
							})
							_that.codeClick = false
							// 倒计时开始
							var daojishi = 60
							_that.codeTimer = setInterval(function(){
								_that.codeBut = "重新发送"+daojishi;
								daojishi--
								if(daojishi<=0){
									_that.codeBut = "重新发送"
									_that.codeClick = true
									clearInterval(_that.codeTimer);
								}
							},1000)
						}).catch(error => {
							
						})
						
					}
				}
			},
			gotoLogin: function () {
				this.$Router.back(1)
			},
			onClick(){
				if(this.cellphone== "" || this.cellphone==null){
					uni.showToast({
						title: '请输入手机号码',
						icon: 'none',
						duration:2000
					});
					return
				}
				if (!this.$validate.isPhone(this.cellphone)) {
				  uni.showToast({
				    icon: 'none',
				    title: '请输入正确的手机号',
					duration:2000
				  })
				  return
				}
				if(this.shortMsgCode== "" || this.shortMsgCode==null){
					uni.showToast({
						title: '请输入短信验证码',
						icon: 'none',
						duration:2000
					});
					return
				}
				if(this.userPassword== "" || this.userPassword==null){
					uni.showToast({
						title: '请输入新密码',
						icon: 'none',
						duration:2000
					});
					return
				}
				const data = {};
				data.cellphone = this.cellphone
				data.shortMsgCode = this.shortMsgCode
				data.userPassword = md5(this.userPassword)
				data.userType = this.userType
				//这里请求接口
				this.$http.post(api.forgePassword, data).then(res => {
					this.changeSuccess = true
					setTimeout(() => this.gotoLogin(), 2000);
				}).catch(error => {
					uni.showToast({
						icon: 'none',
						title: error.response.message,
						duration:2000
					})
				})
				
			}
		},
		beforeDestroy() {
			if (this.codeTimer) {
			    clearInterval(this.codeTimer); // 在Vue实例销毁前，清除我们的定时器
			}
		}
	}
</script>

<style >
	.main {
		width: 100%;
		height: 100%;
	}
	.content{
		width: 600rpx;
		margin: 60rpx auto;
	}
	.logoImgBox {
		text-align: center;
		height: 200rpx;
		margin: 0 auto;
		margin-top: 0rpx;
		margin-bottom: 30rpx;
	}
	.text-reset{
		text-align: center;
		margin-bottom: 100rpx;
		font-size: 36rpx;
	}
	.img-captcha{
		width: 200rpx;
		line-height: 70rpx;
		height: 70rpx;
		text-align: center;
		margin: 0;
	}
</style>
